<template>
	<view>
		<view class="logon-box">
			<view class="title">注册账号</view>
			<view class="flex flex-conter">
				已有账号？ <text @click="goPages('/logon/logon/register')" class="tents">返回去登录  ></text>
			</view>
			<view class="flex-line-height inputCos">
				<input type="text" style="width: 400rpx;" v-model="account" placeholder="请设置登录账号">
			</view>
			<view class="flex-line-height inputCos">
				<input type="text" style="width: 400rpx;" v-model="phone" placeholder="请输入手机号">
			</view>
			<view class="flex-line-height flex-height-between inputCos">
				<view class="flex-line-height flex-height-between">
					<view class="flex-line-height">
						<input style="width: 400rpx;" type="number"  v-model="code" placeholder="请输入验证码">
					</view>
				</view>
				<view class="huoquanyanzheng" @click="yanzhengma">
					 {{countdown>0?countdown+'s':'获取验证码'}}
				</view>
			</view>
			
			<view class="flex-line-height flex-height-between inputCos">
				<view class="flex-line-height">
					<input style="width: 400rpx;" v-if="!ispwd" type="password"  v-model="pwd" placeholder="请再次确认登录密码">
					<input style="width: 400rpx;" v-else type="text"  v-model="pwd" placeholder="请再次确认登录密码">
				</view>
				<view @click="ispwd=!ispwd">
					<image v-if="!ispwd" class="left-icon" :src="imgUrl+'/mima.png'" mode=""></image>
					<image v-else class="left-icon" :src="imgUrl+'/mima2.png'" mode=""></image>
				</view>
			</view>
			<view class="flex-line-height flex-height-between inputCos">
				<view class="flex-line-height">
					<input style="width: 400rpx;" v-if="!ispwd_pwd" type="password"  v-model="pwd_pwd" placeholder="请再次确认登录密码">
					<input style="width: 400rpx;" v-else type="text"  v-model="pwd_pwd" placeholder="请再次确认登录密码">
				</view>
				<view @click="ispwd_pwd=!ispwd_pwd">
					<image v-if="!ispwd_pwd" class="left-icon" :src="imgUrl+'/mima.png'" mode=""></image>
					<image v-else class="left-icon" :src="imgUrl+'/mima2.png'" mode=""></image>
				</view>
			</view>
			<view class="flex-line-height inputCos">
				<input type="text" style="width: 400rpx;" v-model="referral_code" placeholder="请输入邀请码(选填)">
			</view>
			
			<view class="tijiao" @click="logon">
				注册
			</view>
			<view class="xiyi active flex-line-height flex-content">
			    <view class="conterArr">
			    	<checkbox-group @change="checkboxChange">
			    		<label>
			    			<checkbox value="cb"   style="transform:scale(0.6)" />
			    		</label>
			    	</checkbox-group>
			    </view>	我已阅读并同意 <text class="t">《用户协议》《隐私政策》</text>
			</view>
		</view>
	</view>
</template>

<script>
	
	import {
		Request
	} from '@/utils/request.js'
	export default{
		data(){
			return {
				account:"",
				phone:'',
				pwd:'',
				ispwd:false,
				code:'',
				pwd_pwd:"",
				ispwd_pwd:false,
				referral_code:"",
				countdown:0,
			}
		},
		onLoad() {
		},
		methods:{
			startCountdown() {
				this.countdown=60;
			    var counter = setInterval(()=>{
					this.countdown=this.countdown-1;
					console.log(this.countdown)
			        if (this.countdown >= 0) {
			            // document.getElementById("countdown").innerHTML = countdown + " seconds remaining";
			        } else {
			            clearInterval(counter);
			        }
			    }, 1000);
			},
			yanzhengma(){
				Request('send_sms',{
					phone:this.phone
				},'post').then(res => {
					this.startCountdown()
				})
			},
			goPages(path){
				uni.redirectTo({url: '/logon/logon/index'}) 
			},
			logon(){
				if(this.pwd!=this.pwd_pwd){
					uni.showToast({
						title:'两次密码不一致',
						icon:'none'
					})
					return false;
				}
				let formData={account:this.account,phone:this.phone,pwd:this.pwd,code:this.code,referral_code:this.referral_code};
				Request('register',formData,'post').then(res => {
					setTimeout(()=>{
						this.goPages();
					},1000)
				})
			}
		}
	}
</script>

<style scoped>
	.huoquanyanzheng{
		    font-size: 13px;
		    color: #3B5EEC;
	}
	.banner-logo{
		height: 502rpx;
		width: 100%;
	}
	.logon-box{
		background: #FFFFFF;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		position: relative;
		z-index: 9;
		padding:40rpx;
	}
	.logon-box .title{
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 36rpx;
		color: #0D0E0F;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}
	.flex-conter {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 26rpx;
		color: #8F9294;
		font-style: normal;
		margin-top: 12rpx;
		text-transform: none;
		margin-bottom: 12rpx;
	}
	.flex-conter .tents{
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 26rpx;
		color: #3B5EEC;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}
	.inputCos{
		padding-top: 48rpx;
		padding-bottom: 24rpx;
		border-bottom: 1px solid #E1E4E8;
	}
	.logon-box .left-icon{
		width: 36rpx;
		margin-right: 14rpx;
		height: 36rpx;
	}
	.wangjimiam{
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #8F9294;
		text-align: right;
		margin-top: 20rpx;
		font-style: normal;
		text-transform: none;
	}
	.tijiao{
		width: 654rpx;
		height: 88rpx;
		background: #3B5EEC;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		margin: 0 auto;
		line-height: 88rpx;
		color: #FFFFFF;
		text-align: center;
		font-style: normal;
		margin-top: 48rpx;
		text-transform: none;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}
	.xiyi{
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		margin-top: 24rpx;
		color: #8F9294;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}
	.xiyi .t{
		color: #3B5EEC;
	}
	.conterArr{
		width: 32rpx;
		height: 46rpx;
		border-radius: 50%;
		margin-right: 18rpx;
		border: 1rpx solid #C1C4C7;
	}
	.active .conterArr{
		border: none;
	}
	.conterArr .c{
		display: none;
	}
	.active .conterArr .c{
		display: block;
	}
</style>